@import './mixin.styl'
@import './color.styl'


.theme-pc
  .notice-bar
    height: 20px
    .notice-text
      font-size: 12px
      line-height: 20px
      color: yellow
  .top-nav
    top: 25px

.theme-pc-e
  .top-nav
    top: 40px

  .nav-bar
    top: 38px

  .notice-bar
    height: 30px
    .icon
      display: none
    .notice-wrap
      left: 0
      .notice-text
        font-size: 14px
        line-height: 30px
        color: $white

  .barrage-item
    padding-left: 45px
    padding-right: 15px
    background-color: rgba(#9bd6ed, .6)
    border-radius: 25px
    .avatar
      width: 24px
      height: 24px
      left: 15px

.theme-pc
  .foot-menu
    .foot-menu-list
      &.center
        margin: 0 auto
    .menu-custom
      max-width: 40%
    .menu-system
      text-align: right
  .ad
    &.ad-right
      bottom: 80px
      right: 10px
    &.ad-middle
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)
  .notice-bar
    font-size: 12px
  // logo
  .profile
    max-width: 180px
    .logo
      max-width: 180px
      max-height: 160px
      img
        max-width: 180px
        max-height: 160px

  .scene-list
    .scene-list-item
      border: 1px solid transparent
  .scene-group
    .scene-group-item
      border: 1px solid transparent

  // 侧栏挂件
  .pendant
    bottom: 300px
    .pendant-icon
      margin-top: 15px
    .audio-icon
      i
        font-size: 38px
    .cart-icon
      i
        font-size: 34px
    .payreward-icon
      width: 40px
      height: 40px

  // 开场提示
  .start-remind-frame
    .wrap
      & > img, & > video
        max-width: 500px
        pos-center()
        z-index: 100
  .loading-wrap
    pos-center()
    img
      max-width: 100%
      max-height: 100%
  // weather
  .weather
    left: 200px
    .now
      .weather-temp
         margin-top: 30px
  // toolsbar
  .toolsbar
    top: 110px

  // minimap
  .minimap
    left: -300px

  // danmu
  .barrage-container
    .barrage-input
      bottom: 5px
      left: 50%
      transform: translateX(-50%)
      .input-wrap
        display: inline-block
        width: 300px
        input
          position: relative
          top: 2px
          width: 100%
      .btn-wrap
        .barrage-btn
          padding: 11px 20px

  // frame
  .swiper-frame
    .wrap
      height: 450px
      margin: 80px auto 0 auto
      .el-carousel__container
        height: 450px
      .el-carousel__item
        text-align: center
        display: flex
        justify-content: center
        align-items: center
        img
          max-width: 100%
          max-height: 100%

  .three-frame
    .three-wrap
      position: absolute
      left: 50%
      top: 50%
      height: 40vw
      width: 50vw
      z-index: 4000
      transform: translate(-50%, -50%)
      frame
        position absolute
        height: 40vw
        width: 50vw
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)

  .reward-frame
    .content
      position: absolute
      height: auto
      left: 50%
      top: 15%
      max-width: 320px
      padding: 150px 20px 80px 20px
      border-radius: 6px
      margin-left: -170px

  .order-center
    .order-list
      .row
        .item-body
          margin-bottom: 10px
          background: $white
          .img-box, .number, .info
            display: inline-block
          .img-box
            width: 100px
            height: 100px
            padding: 10px
            overflow: hidden
            img
              width: 100%
              height: 100%
          .number
            float: right
            width: 50px
            padding-right: 15px
            font-size: 12px
            text-align: right
            .price
              color: $black
            .origin-price
              color: #babbbd
              text-decoration: line-through
            .count
              color: #737373
              font-size: 10px
          .info
            min-width: 300px
            .title
              font-weight: 600px
            p
              line-height: 24px
            .date-time
              color: #a9a9a9
              margin-bottom: 10px

